<template>
  <view class="container">
    <u-navbar
      title="确认预约"
      :is-back="true"
    ></u-navbar>
    
    <view class="card-section">
      <view class="card-header">
        <text class="title">预约信息</text>
      </view>
      
      <view class="card-content">
        <view class="info-item">
          <text class="label">图书馆</text>
          <text class="value">{{ reserveData.libraryName }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">楼层</text>
          <text class="value">{{ reserveData.floorName }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">区域</text>
          <text class="value">{{ reserveData.areaName }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">座位号</text>
          <text class="value">{{ reserveData.seatName }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">日期</text>
          <text class="value">{{ reserveData.date }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">时段</text>
          <text class="value">{{ getTimeSlotText(reserveData.timeSlot) }}</text>
        </view>
      </view>
    </view>
    
    <view class="card-section">
      <view class="card-header">
        <text class="title">预约人信息</text>
      </view>
      
      <view class="card-content">
        <view class="info-item">
          <text class="label">姓名</text>
          <text class="value">{{ userInfo.studentInfo ? userInfo.studentInfo.name : '未绑定' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">学号</text>
          <text class="value">{{ userInfo.studentInfo ? userInfo.studentInfo.student_id : '未绑定' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">学校</text>
          <text class="value">{{ userInfo.studentInfo ? userInfo.studentInfo.school_name : '未绑定' }}</text>
        </view>
      </view>
      
      <view class="bind-tip" v-if="!userInfo.studentInfo">
        <text>您尚未绑定学生信息，请先绑定</text>
        <u-button type="primary" size="mini" @click="goToBind">去绑定</u-button>
      </view>
    </view>
    
    <view class="rules-section">
      <view class="rules-title">预约须知</view>
      <view class="rules-content">
        <view class="rule-item">1. 预约成功后，请在预约时间内到达图书馆；</view>
        <view class="rule-item">2. 请在预约开始时间30分钟内完成签到，否则系统将自动取消预约；</view>
        <view class="rule-item">3. 离开时请记得签退，连续三次未签退将被限制预约；</view>
        <view class="rule-item">4. 如需取消预约，请提前操作，减少资源浪费；</view>
        <view class="rule-item">5. 请遵守图书馆相关规定，保持安静，爱护公共设施。</view>
      </view>
    </view>
    
    <view class="agreement">
      <u-checkbox v-model="agreed" shape="circle" active-color="#1A8DFF"></u-checkbox>
      <text class="agreement-text">我已阅读并同意《图书馆座位预约规则》</text>
    </view>
    
    <view class="bottom-button">
      <u-button type="primary" :disabled="!canSubmit" @click="submitReservation">确认预约</u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      reserveData: {
        date: '',
        timeSlot: '',
        libraryId: '',
        libraryName: '',
        floorId: '',
        floorName: '',
        areaId: '',
        areaName: '',
        seatId: '',
        seatName: ''
      },
      agreed: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'hasLogin']),
    canSubmit() {
      return this.agreed && this.userInfo.studentInfo
    }
  },
  onLoad() {
    // 获取预约数据
    const reserveData = uni.getStorageSync('reserveData')
    if (reserveData) {
      this.reserveData = JSON.parse(reserveData)
    } else {
      uni.showToast({
        title: '预约数据不存在',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    // 获取时段文本
    getTimeSlotText(timeSlot) {
      const timeSlotTextMap = {
        'morning': '上午 (8:00-12:00)',
        'afternoon': '下午 (13:00-17:00)',
        'evening': '晚上 (18:00-22:00)',
        'allday': '全天 (8:00-22:00)'
      }
      return timeSlotTextMap[timeSlot] || '未知时段'
    },
    
    // 跳转到绑定页面
    goToBind() {
      uni.navigateTo({
        url: '/pages/my/bind'
      })
    },
    
    // 提交预约
    async submitReservation() {
      if (!this.canSubmit) {
        if (!this.userInfo.studentInfo) {
          uni.showToast({
            title: '请先绑定学生信息',
            icon: 'none'
          })
        } else if (!this.agreed) {
          uni.showToast({
            title: '请先同意预约规则',
            icon: 'none'
          })
        }
        return
      }
      
      try {
        uni.showLoading({
          title: '提交中'
        })
        
        const res = await this.$api.reserve({
          seat_id: this.reserveData.seatId,
          date: this.reserveData.date,
          time_slot: this.reserveData.timeSlot
        })
        
        uni.hideLoading()
        
        if (res.data && res.data.code === 200) {
          // 清除预约数据
          uni.removeStorageSync('reserveData')
          
          // 显示成功提示
          uni.showToast({
            title: '预约成功',
            icon: 'success'
          })
          
          // 跳转到预约记录页面
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/record/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: res.data.message || '预约失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('预约失败', error)
        uni.showToast({
          title: '预约失败，请稍后重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.card-section {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.card-content {
  padding: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-size: 28rpx;
    color: #666;
  }
  
  .value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

.bind-tip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff7e6;
  
  text {
    font-size: 26rpx;
    color: #fa8c16;
  }
}

.rules-section {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.rules-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.rule-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10rpx;
}

.agreement {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin: 0 20rpx;
  
  .agreement-text {
    font-size: 26rpx;
    color: #666;
    margin-left: 10rpx;
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>
